<template>
	<view>
		<view class="navBar" :style="{backgroundColor:bgColor}">
			<view class="status" :style="statusHeightF()"></view>
			<!-- <view class="status" :style="{height:statusHeight+'px'}"></view> -->
			<view class="title-bar" :style="titleHeightF()">
			<!-- <view class="title-bar" :style="{heihgt:titleHeight+'px',lineHeight:titleHeight+'px'}"> -->
				<view class="left">
					<slot name="left-holder"></slot>
				</view>
				<view class="">{{title}}</view>
				<view class="right">
					<slot name="right-holder"></slot>
				</view>
			</view>
		</view>
		<!-- <view class="" v-if="holderFlag" :style="{height:(statusHeight+titleHeight)+'px'}"></view> -->
		<view class="" v-if="holderFlag" :style="holder()"></view>
	</view>


</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		name: "nav-bar",
		data() {
			return {
				statusHeight: 0,
				titleHeight: 44,
				bgColor: 'transpants',
				holderFlag: true
			};
		},
		props: {
			title: {
				type: String,
				default: ''
			}
		},
		methods: {
			statusHeightF() {
				return `height:${this.statusHeight}px`
			},
			titleHeightF() {
				return `height:${this.titleHeight}px;lineHeight:${this.titleHeight}px`
			},
			holder() {
				return `height:${this.statusHeight+this.titleHeight}px`
			},
			back() {
				uni.navigateBack()
			}
		},
		watch: {
			bgColor(newValue, oldValue) {
				this.bgColor = newValue
			},
			holderFlag(newValue, oldValue) {
				this.holderFlag = newValue
			}
		},
		computed: {
			...mapState(['systemInfo'])
		},
		created() {
			// this.systemInfo = uni.getSystemInfoSync()
			this.statusHeight = this.systemInfo.statusBarHeight;
		}
	}
</script>

<style lang="scss">
	.navBar {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 80;

		.status {}

		.title-bar {
			position: relative;
			font-size: 36rpx;
			font-weight: 500;
			text-align: center;

			.left {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				left: 46rpx;
				// color: #979797;
				// font-size: 46rpx;
			}

			.right {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				right: 46rpx;
				// color: #979797;
				// font-size: 46rpx;
			}
		}
	}
</style>